import * as React from "react";
import { EyeOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons';
import {withRouter} from '@/hooks/withRouter'

class TextItem extends React.Component<any,any>{
    constructor(props:any) {
        super(props);
    }

    gotoArticleDetail = (item:any) =>  {
        this.props.navigate(`/Essay?id=${item.id}`)
    }

    classifyTab = [
        {name: "全部", index: "001", href: "/"},
        {name: "前端", index: "002", href: "/"},
        {name: "后端", index: "003", href: "/"},
        {name: "算法", index: "004", href: "/"},
        {name: "架构", index: "005", href: "/"},
        {name: "面试", index: "006", href: "/"},
        {name: "阅读", index: "007", href: "/"},
        {name: "笔记", index: "008", href: "/"},
    ]

    getClassName = (code: string) => {
       return  this.classifyTab.find((item) => item.index == code )!.name
    }
    render(){

        return(
            <li className="home-li">
                <div className="li-text">
                    <span className="li-item">
                        <span className="item-name">{this.props.item.author}</span>
                        <span className="item-g">|</span>
                        <span className="item-time">{this.props.item.publish_time}</span>
                        <span className="item-g">|</span>
                        <span className="item-time">{this.getClassName(this.props.item.classify_two)}</span>
                    </span>
                    <span className="li-tit" onClick={this.gotoArticleDetail.bind(this,this.props.item)}>{this.props.item.title}</span>
                    <span className="li-con">{this.props.item.abstract}</span>
                    <span className="li-item" style={{marginTop:'0.1rem'}}>
                        <span className="item-name"><EyeOutlined /> {this.props.item.views_num}</span>
                        <span className="item-g">|</span>
                        <span className="item-name"> <LikeOutlined /> {this.props.item.encourage_num}</span>
                        <span className="item-g">|</span>
                        <span className="item-name"><MessageOutlined /> {this.props.item.views_num}</span>
                    </span>
                </div>

                <div className="li-img">
                    <img src={this.props.item.cover_pic} alt=""/>
                </div>
            </li>
        )
    }
}

export default withRouter(TextItem)